<script setup>
import {provide} from 'vue';
import {ReactiveEx} from "@/utils/merge";

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['change', 'update:modelValue'])

const data = new ReactiveEx({
  values: []
});

const items = data.template;

const addItem = function (item) {
  items.values.push(item.value);
  emitAll()
}

const deleteItem = function ({value}) {
  let valuesLen = items.values.length;
  let _item;
  for (let i = valuesLen; i >= 0; i--) {
    _item = items.values[i];
    if (_item === (value)) {
      items.values.splice(i, 1);
    }
  }
  emitAll()
}

const getItems = function () {
  return props.modelValue
}
const emitAll = function () {
  emit('update:modelValue', items.values)
  emit('change', items.values)
}

provide('group', {
  addItem,
  deleteItem,
  getItems
})

</script>

<template>
  <checkbox-group>
    <slot></slot>
  </checkbox-group>
</template>

<style scoped lang="scss">

</style>
